<template>
  <view>
    <uni-popup ref="popup" type="center" @change="popupChange" :is-mask-click="true">
      <view class="content auto-width" :rules="rules">
        <view class="content--header">{{title}}</view>
        <uni-forms :label-width="100" :modelValue="formData" ref="form" :label-position="uniFormsLabelPosition">
          <uni-forms-item label="标识" name="name" required :rules="[{ required: true, errorMessage: '请输入标识' }]">
            <uni-easyinput v-model="formData.name" placeholder="请输入唯一标识，例如 “system、user、upload”" />
          </uni-forms-item>
          <uni-forms-item label="标题" name="title" required :rules="[{ required: true, errorMessage: '请输入标题' }]">
            <uni-easyinput v-model="formData.title" placeholder="请输入标题，例如 “系统、用户、上传”" />
          </uni-forms-item>
          <uni-forms-item name="serial" label="排序号" required>
            <uni-easyinput type="number" placeholder="请输入排序号" v-model="formData.serial" trim="both" :clearable="false" />
          </uni-forms-item>
        </uni-forms>
        <view class="uni-group">
          <button @click="submit()" class="uni-button" type="primary">{{$t('common.button.submit')}}</button>
        </view>
      </view>
      <uni-icons type="closeempty" size="24" class="close" @click="close"></uni-icons>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapActions
  } from "vuex"
  export default {
    name: 'add-group',
    props: {
      open: {
        type: Boolean,
        default: false,
      },
      data: {
        default () {
          return null
        }
      }
    },
    computed:{
      title(){
        if(this.data){
          return '修改分组'
        }
        
        return '添加分组'
      }
    },
    data() {
      return {
        formData: {
          name: "",
          title: "",
        }
      }
    },
    watch: {
      open: {
        handler(newVal) {
          if (newVal) {
            this.reset();
            this.$refs.popup.open();
            
            
          } else {
            this.$refs.popup.close();
          }
        },
        deep: true
      }
    },
    methods: {
      ...mapActions('configGroup', ['save','data']),
      reset() {

        this.formData = {
          name: "",
          title: "",
        };
      
        if(this.data){
          this.formData = this.data
        }
      },
      close() {
        this.$emit("update:open", false);
      },
      popupChange(e) {
        if (!e.show) this.reset()
        this.$emit("update:open", e.show);
      },
      submit() {
        this.$refs.form.validate().then(data => {
          data.id = this.formData.id || 0;
          this.save(data).then(res => {
            this.close();
            this.$emit("success")
          })
        })
      }
    }
  }
</script>

<style lang="scss">
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
  }

  .content {
    width: 400px;
    background: #fff;
    padding: 30px;
    border-radius: 5px;

    &--header {
      font-size: 16px;
      font-weight: 500;
      color: #333;

      margin-bottom: 30px;

    }
  }
</style>